<template>
	<view class="s-status">
		<view class="ing-box" id="ingbox">
			<view class="img">
				<view class="line" v-if="isLine" :style="{height:lineLength+'px'}"></view>
				<image v-if="check" :src="$img_path('/pagesMine/14.png')" mode="widthFix"></image>
				<image v-else :src="$img_path('/pagesMine/15.png')" mode="widthFix"></image>
			</view>
			<view class="info">
				<view class="s-title">
					<slot name="title"></slot>
				</view>
				<view class="s-text">
					<slot name="text"></slot>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default{
		props:{
			isLine:{
				type:Boolean,
				default:true
			},
			check:{
				type:Boolean,
				default:true
			},
		},
		data(){
			return {
				lineLength:0,
			}
		},
		mounted() {
			
			this.getBoxInfo()
		},
		methods:{
			getBoxInfo(){
				const query = uni.createSelectorQuery().in(this);
				query
				  .select("#ingbox")
				  .boundingClientRect((data)=>{
					  // console.log("得到布局位置信息" , data);
					  this.lineLength = data.height
				  }).exec();
			}
		}
	}
</script>
<style lang="scss" scoped>
	.s-status{
		.ing-box{
			display: flex;
			align-items: flex-start;
			padding-bottom: 50rpx;
			.img{
				position: relative;
				image{
					width: 40rpx;
					height: 40rpx;
					position: relative;
					z-index: 3;
					background-color: #FFFFFF;
				}
				.line{
					width: 0;
					border-left: 2rpx dashed #707070;
					position: absolute;
					left: 20rpx;
					top: 20rpx;
					z-index: 2;
				}
			}
			.info{
				padding-left: 20rpx;
				.s-title{
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					line-height: 40rpx;
				}
				.s-text{
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-top: 8rpx;
				}
			}
		}
	}
</style>